<template>
    <div class="banner" :style="`background-image: url(${$baseUrl+freeGiftList.game_detail_img})`"></div>
    <div class="content_main">
        <div class="header-bar">
            <div class="video-wrap">
                <!-- 游戏视频 -->
                <video v-if="freeGiftList.game_detail_video" :src="$baseUrl+freeGiftList.game_detail_video" controls autoplay loop muted></video>
                <img v-if="!freeGiftList.game_detail_video"  :src="$baseUrl+freeGiftList.game_detail_img" alt="" width="942" height="420">
                <!-- 游戏信息 -->
                <div style="display:flex;flex-direction: column;">
                  <GameInfo :freeGiftList="freeGiftList"/>
                  <div class="game_info">
                    <div class="introduce">
                      <h3>{{ $t('editor_recommendation') }}</h3>
                    </div>
                    <div class="expandable" style="margin-left: 0;margin-top: 1em;">
                      <div class="bui-expander-content" ref="content">
                        <div class="multi-line-text">
                          {{ freeGiftList.builder_desc }}
<!--                          <span v-show="!freeGiftList.builder_desc">{{ $t('No_content') }}</span>-->
                        </div>
                      </div>
<!--                      <div class="bui-expander-switch" @click="switch_bar_fn"><span ref="text">{{ $t('expand') }}</span><i ref="i"></i></div>-->
                    </div>
                  </div>
                </div>
            </div>
           <div class="main-bar">
               <div class="left-panel">
                    <LeftPanel :freeGiftList="freeGiftList" :gameId="gameId"/>
               </div> 
               <div class="right-panel">
                    <!-- <div class="share">
                        <div class="introduce">
                            <h3>分享</h3>
                            <div class="bui-share-pc">
                                <div class="biliSharePc">
                                    <ul class="shareIcon">
                                        <li class="icon_bili"><svg t="1718619259941" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5873" width="35" height="35"><path d="M546.986667 1024H56.490667A56.533333 56.533333 0 0 1 0 967.466667V56.533333C0 25.301333 25.301333 0 56.533333 0h910.933334C998.698667 0 1024 25.301333 1024 56.533333v910.933334c0 31.232-25.301333 56.533333-56.533333 56.533333H706.56v-396.544h133.12l19.882667-154.538667H706.56V374.186667c0-44.714667 12.373333-75.221333 76.586667-75.221334h81.834666v-138.24c-14.165333-1.92-62.72-6.101333-119.253333-6.101333-118.016 0-198.784 72.021333-198.784 204.288v113.92H413.525333v154.581333h133.418667V1024z" fill="#3B5998" p-id="5874"></path></svg></li>
                                        <li class="icon_weibo"><svg t="1718619259941" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5873" width="35" height="35"><path d="M546.986667 1024H56.490667A56.533333 56.533333 0 0 1 0 967.466667V56.533333C0 25.301333 25.301333 0 56.533333 0h910.933334C998.698667 0 1024 25.301333 1024 56.533333v910.933334c0 31.232-25.301333 56.533333-56.533333 56.533333H706.56v-396.544h133.12l19.882667-154.538667H706.56V374.186667c0-44.714667 12.373333-75.221333 76.586667-75.221334h81.834666v-138.24c-14.165333-1.92-62.72-6.101333-119.253333-6.101333-118.016 0-198.784 72.021333-198.784 204.288v113.92H413.525333v154.581333h133.418667V1024z" fill="#3B5998" p-id="5874"></path></svg></li>
                                        <li class="icon_qzone"><svg t="1718619259941" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5873" width="35" height="35"><path d="M546.986667 1024H56.490667A56.533333 56.533333 0 0 1 0 967.466667V56.533333C0 25.301333 25.301333 0 56.533333 0h910.933334C998.698667 0 1024 25.301333 1024 56.533333v910.933334c0 31.232-25.301333 56.533333-56.533333 56.533333H706.56v-396.544h133.12l19.882667-154.538667H706.56V374.186667c0-44.714667 12.373333-75.221333 76.586667-75.221334h81.834666v-138.24c-14.165333-1.92-62.72-6.101333-119.253333-6.101333-118.016 0-198.784 72.021333-198.784 204.288v113.92H413.525333v154.581333h133.418667V1024z" fill="#3B5998" p-id="5874"></path></svg></li>
                                        <li class="icon_qq"><svg t="1718619259941" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5873" width="35" height="35"><path d="M546.986667 1024H56.490667A56.533333 56.533333 0 0 1 0 967.466667V56.533333C0 25.301333 25.301333 0 56.533333 0h910.933334C998.698667 0 1024 25.301333 1024 56.533333v910.933334c0 31.232-25.301333 56.533333-56.533333 56.533333H706.56v-396.544h133.12l19.882667-154.538667H706.56V374.186667c0-44.714667 12.373333-75.221333 76.586667-75.221334h81.834666v-138.24c-14.165333-1.92-62.72-6.101333-119.253333-6.101333-118.016 0-198.784 72.021333-198.784 204.288v113.92H413.525333v154.581333h133.418667V1024z" fill="#3B5998" p-id="5874"></path></svg></li>
                                    </ul>
                                </div>
                            </div>
                        </div>    
                    </div> -->

                    <div style="margin-top: 20px;">
                        <ListHot/>
                    </div>
                    
               </div> 
           </div>
        </div>
    </div>
</template>

<script setup>
    import GameInfo from "@/components/GameCenter/GameInfo/index.vue"  //游戏信息
    import LeftPanel from "@/components/GameCenter/LeftPanel/index.vue"  //游戏详情左侧
    import ListHot from "@/components/Rank/ListHot/index.vue"  
    import {watch,reactive} from 'vue'
    import axios from '@/utils/api'
    import { useRoute } from 'vue-router';

    const route = useRoute();
    const gameId = route.params.id;
    console.log(gameId);

    const freeGiftList = reactive([])
    const getFreeGiftList = async (gameId) =>{
        const list = await axios.get('/gameDetail?id='+gameId)
        Object.assign(freeGiftList,list.data)
        console.log(freeGiftList);
    }
    getFreeGiftList(gameId)

    // 监听路由参数变化
    watch(() => route.params.id, (newId) => {
        getFreeGiftList(newId);
    });
</script>

<style lang="less" scoped>
.banner {
    width: 100%;
    height: 454px;
    position: absolute;
    overflow: hidden;
    // background: url(https://s1.hdslb.com/bfs/static/game-web/duang/home/asserts/home_bg.e09be3a.png) no-repeat;
    background-repeat: no-repeat;
    background-size: 2000px 480px;
    background-position: top;
    background-size: cover;
    top: 80px;
}
.banner::before {
    content: '';
    position: absolute;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .1), #fff);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.content_main{
    position: relative;
    @media screen and (min-width: 1701px) {
        width: 60% !important;
    }
    .video-wrap{
        margin-top: 200px;
        display: flex;
        video{
            width: 745px;
            height: 420px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
            // border-radius: 10px;
        }
    }
    .main-bar {
        background-color: #fff;
        padding-top: 80px;
        line-height: 1.5;
        padding-bottom: 100px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .left-panel{
            width: 65%;
        }
        .left-panel>* {
            text-align: left;
        }
        .right-panel{
            width: 30%; 
            .share{
                .introduce{
                    h3 {
                        font-size: 18px;
                        padding-left: 19px;
                        font-weight: 400;
                        position: relative;
                        margin-top: 2em;
                    }
                    h3:before {
                        content: "";
                        width: 4px;
                        height: 18px;
                        background-color: #23ade5;
                        border-radius: 2px;
                        left: 0;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    .bui-share-pc {
                        margin-top: 10px;
                        border: 1px solid #eee;
                        border-radius: 6px;
                        padding: 20px 25px;
                        .shareIcon{
                            display: flex;
                            li{
                                list-style: none;
                            }
                        }
                    }
                }
            }
        }
    }
    .main-bar > *{
        margin: initial;
    }
  .game_info{
    margin-left: 20px;
    margin-top: 7px;
    padding: 16px 16px 0;
    height: 240px;
    //width:250px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    .introduce h3 {
      font-size: 18px;
      padding-left: 19px;
      font-weight: 400;
      position: relative;
    }
    .introduce h3:before {
      content: "";
      width: 4px;
      height: 18px;
      background-color: #23ade5;
      border-radius: 2px;
      left: 0;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .bui-expander-content{
      overflow: auto;
      max-height: 11em;
      /* 隐藏滚动条 */
      scrollbar-width: none;
      /* 针对Webkit浏览器隐藏滚动条 */
      -ms-overflow-style: none;
      .multi-line-text{
        width: 20.7em;
        font-size: 12px;
        color: #666;
        padding-right: 1px;
        white-space: pre-wrap;
      }
    }

  }
}
</style>